<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-vue使用步骤</title>

</head>
<body>
    <div id="app">
          姓名: <input type="text" v-model.trim="name"/><br/>
          性别: <input type="radio" v-model="gender" name="sex" value="male">男<input type="radio" v-model="gender" name="sex" value="female">女<br/>
          爱好:
          <input type="checkbox" name="hobby" v-model="hobbys" value="eat"/>吃饭
          <input type="checkbox" name="hobby" v-model="hobbys" value="sleep"/>睡觉
          <input type="checkbox" name="hobby" v-model="hobbys" value="play"/>打豆豆<br/>
          籍贯:
          <select v-model="address">
              <option value="beijin">北京</option>
              <option value="shanghai">上海</option>
              <option value="guangzhou">广州</option>
          </select>
          <br/>
          记住我:<input type="checkbox" v-model="rememebr"/>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                name: '',
                gender: 'female',
                hobbys:[],
                address:'shanghai',
                rememebr:''
            }
        })
    </script>
</body>
</html>